<div class="content-section introduction">
    <div>
        <span class="feature-title">Card</span>
        <span>Card is a flexible container component.</span>
    </div>
</div>

<div class="content-section implementation">
    <p-card title="Simple Card" [style]="{width: '360px'}">
        <div style="line-height:1.5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
            quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</div>
    </p-card>

    <br><br>

    <p-card title="Advanced Card" subtitle="Subtitle" [style]="{width: '360px'}" styleClass="ui-card-shadow">
        <p-header>
            <img src="Card" src="assets/showcase/images/usercard.png">
        </p-header>
        <div style="line-height:1.5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
            quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</div>
        <p-footer>
            <button pButton type="button" label="Save" icon="pi pi-check" style="margin-right: .25em"></button>
            <button pButton type="button" label="Cancel" icon="pi pi-times" class="ui-button-secondary"></button>
        </p-footer>
    </p-card>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;CardModule&#125; from 'primeng/card';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>Card is defined with p-card element.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-card&gt;
    Content
&lt;/p-card&gt;
</code>
</pre>
            <h3>Title</h3>
            <p>Title text of the card is provided using the <strong>title</strong> property, optionally <strong>subtitle</strong> property is available for additional information about the card.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-card title="Title"&gt;
    Content
&lt;/p-card&gt;
</code>
</pre>

            <h3>Header and Footer Content</h3>
            <p>Header and Footers sections can be customized using p-header and p-footer components.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-card&gt;
    &lt;p-header&gt;
        Header content here
    &lt;/p-header&gt;
    Body Content
    &lt;p-footer&gt;
        Footer content here
    &lt;/p-footer&gt;
&lt;/p-card&gt;
</code>
</pre>

            <h3>Properties</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>title</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Title of the card.</td>
                        </tr>
                        <tr>
                            <td>subtitle</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Secondary title of the card.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Styling</h3>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ui-card</td>
                            <td>Container element.</td>
                        </tr>
                        <tr>
                            <td>ui-card-title</td>
                            <td>Title element.</td>
                        </tr>
                        <tr>
                            <td>ui-card-subtitle</td>
                            <td>Subtitle element.</td>
                        </tr>
                        <tr>
                            <td>ui-card-content</td>
                            <td>Content of the card.</td>
                        </tr>
                        <tr>
                            <td>ui-card-footer</td>
                            <td>Footer of the card.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Dependencies</h3>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
        <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/card" class="btn-viewsource" target="_blank">
            <i class="fa fa-github"></i>
            <span>View on GitHub</span>
        </a>

<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-card title="Simple Card" [style]="&#123;width: '360px'&#125;"&gt;
    &lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
        quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!&lt;/div&gt;
&lt;/p-card&gt;

&lt;br&gt;
&lt;br&gt;

&lt;p-card title="Advanced Card" subtitle="Subtitle" [style]="&#123;width: '360px'&#125;" styleClass="ui-card-shadow"&gt;
    &lt;p-header&gt;
        &lt;img src="Card" src="assets/showcase/images/usercard.png"&gt;
    &lt;/p-header&gt;
    &lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
        quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!&lt;/div&gt;
    &lt;p-footer&gt;
        &lt;button pButton type="button" label="Save" icon="pi pi-check" style="margin-right: .25em"&gt;&lt;/button&gt;
        &lt;button pButton type="button" label="Cancel" icon="pi pi-times" class="ui-button-secondary"&gt;&lt;/button&gt;
    &lt;/p-footer&gt;
&lt;/p-card&gt;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>
